<script type="text/javascript">
var currentSlide = 0, playing = 1

function slides(){
    return document.querySelectorAll('div.stage>img')
}

function showSlide(slideNumber){
    theSlides = slides()
    for (c=0; c<theSlides.length; c++) {
        theSlides[c].style.opacity="0";
    }
    theSlides[slideNumber].style.opacity="1";
}

function showNextSlide(){
    if (playing) {
        currentSlide = (currentSlide > slides().length-2) ? 0 : currentSlide + 1;
        showSlide(currentSlide);
    }
}

function stageClicked() {
    slide = slides()[currentSlide];
    target = slide.getAttribute('target');
    if (target == '_blank') {
        window.webkit.messageHandlers.openExternalLink.postMessage(slide.getAttribute('href'));
    } else {
        window.location.href = slide.getAttribute('href');
    }
}

window.onload=function(){
    showSlide(0);
    if (slides().length > 1) {
        setInterval(showNextSlide, 7500);
    }
}
</script>

<div class="showcase">
    <div class="stage" onClick='stageClicked();'>
        <img href="#" alt="Branding" src="static/branding.jpg" />
        <img href="#" alt="Branding" src="static/branding1.jpg" />
        <img href="#" alt="Branding" src="static/branding2.jpg" />
    </div>
</div>
